<template>
  <div class="wrapper">
    <div class="http404-container">
      <img class="pic" src="@/assets/404/1.png" alt="" />
      <div class="title">
        {{ $t('views.NoAuth.84c446f99e97de523267dd2ee6eac139') }}
      </div>
      <div class="desc">
        {{ $t('views.NoAuth.8eae45e86ca34e384dd6d924b45c622c') }}
      </div>
      <div class="btn">
        <el-button type="primary" @click="handleBack">
          {{ $t('views.NoAuth.1e48d94eb22030a264287751fb3f3008') }}
        </el-button>
        <el-button
          v-if="addRouters && addRouters.length >0"
          type="primary"
          @click="handleHome">
          {{ $t('views.NoAuth.09ddf9051b982f52f1974cc834393fd6') }}
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

import { removeAuth } from '@/utils/auth'

export default {
  name: 'PageNoAuth',
  computed: {
    ...mapGetters([
      'addRouters'
    ])
  },
  methods: {
    handleBack() {
      removeAuth().then(() => {
        this.$router.push('/login')
      })
    },

    handleHome() {
      this.$router.push('/')
    }
  }
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.wrapper {
  position: relative;
}

.http404-container {
  position: relative;
  top: 50%;
  text-align: center;
  transform: translateY(-80%);

  .pic {
    width: 200px;
  }

  .title {
    width: 100%;
    margin-top: 40px;
    font-size: 26px;
  }

  .desc {
    width: 100%;
    margin-top: 12px;
    font-size: 14px;
    color: $--color-text-secondary;
    text-align: center;
  }

  .el-button {
    margin-top: 24px;
  }
}
</style>
